<template>
  <el-dialog :title="formData.id?'编辑':'添加'" :visible.sync="modelShow">
    <el-form ref="modelForm" :model="formData" label-width="120px" :rules="formRules" size="small">
      <el-row>
        <el-col :span="12">
          <el-form-item label="功能名称" prop="accessName">
            <el-input v-model="formData.accessName"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上级">
            <TreeSelect v-model="formData.parentId" :multiple="false" :options="menuOptions"
                        noChildrenText="没有下一级了" noOptionsText="没有可选项" placeholder="选择上级菜单"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单类型" prop="menuLevel">
            <el-radio-group v-model="menuType" size="small">
              <el-radio :label="1" border>菜单</el-radio>
              <el-radio :label="0" border>按钮</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序">
            <el-input-number v-model="formData.sortNum" style="width: 100%"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="前端组件" v-if="menuType === 1">
        <el-input v-model="formData.component"/>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="图标" prop="menuIcon">
            <el-input v-model="formData.menuIcon"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="url" prop="accessName">
            <el-input v-model="formData.accessUrl"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button @click="modelShow = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { saveOrUpdateApi,treeRoleAccessApi } from '@/api/system/sysMenu'
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'SysMenuForm',
  components: { TreeSelect },
  data(){
    return {
      modelShow:false,
      formData:{},
      menuType:1,
      formRules:{
        accessName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        menuLevel: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
        url: [{ required: true, message: '请输入URL', trigger: 'blur' }]
      },
      menuOptions: [],
    }
  },
  methods:{
    opened(isEdit, row){
      this.formData = isEdit ? row:{sortNum:1};
      if (isEdit){
        this.menuType = this.formData.menuLevel === 0 ? 0 : 1;//menuLevel1、2、3...都是菜单
      }
      this.loadTreeMenu();
      this.modelShow = true;
    },
    loadTreeMenu(){
      treeRoleAccessApi(1).then(res => {
        this.menuOptions = res.data;
      })
    },
    submitForm(){
      this.formData.menuLevel = this.menuType;//后端设置菜单级别
      this.$refs['modelForm'].validate((valid) => {
        if (valid) {
          saveOrUpdateApi(this.formData).then(res => {
            this.modelShow = false
            this.$emit('refreshTable');
          })
        }
      })
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>

</style>
